<template>
    <div>
        <div class="showPopupTop" v-show="showPop">
            <div class="back" @click="$router.go(-1)">
                <span class="iconfont icon-zuojiantou"></span>
                <span class="backText">返回</span>
            </div>
            <div class="SPT_right">
                <div class="SPTR_Box" @click="xiazaiBtn">
                    <span class="iconfont icon-xiazai"></span>
                    <p>全本下载</p>
                </div>
                <!-- <div class="SPTR_Box"> -->
                <router-link class="SPTR_Box" tag="div" :to="'bookReviewList?id='+getBookID">
                    <span class="iconfont icon-31pinglun"></span>
                    <p>书评</p>
                </router-link>
                <!-- </div> -->
                <div class="SPTR_Box" @click="morebtn=!morebtn">
                    <span class="iconfont icon-gengduo"></span>
                    <p>更多</p>
                </div>
                <!-- <div class="moreoption"> -->
                <router-link class="moreoption" tag="div" :to="'TheWorkDetails?id='+getBookID" v-show="morebtn">
                    <p>本书详情信息</p>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
        <div class="showPopupBottom" v-show="showPop">
            <div class="sectionBox" v-show="!typeShow">
                <div class="SB_Btn">
                    <span @click="prevBtn">上一章</span>
                </div>
                <div class="SB_Btn">
                    <span @click="nextBtn">下一章</span>
                </div>
            </div>
            <div class="installPage" v-show="typeShow">
                <div class="typeSize">
                    <span>字号</span>
                    <div class="TS_Btn" @click="TypeSizeBtn">A-</div>
                    <span>{{TypeSize}}</span>
                    <div class="TS_Btn" @click="TypeSizeBtn">A+</div>
                </div>
                <div class="typeSize">
                    <span>背景</span>
                    <div :class="{bg_Color:true, maizeYellow:true,con:bgtype==1}" @click="bgtype=1"></div>
                    <div :class="{bg_Color:true, aeneous:true,con:bgtype==2}" @click="bgtype=2"></div>
                    <div :class="{bg_Color:true, bluishWhite:true,con:bgtype==3}" @click="bgtype=3"></div>
                </div>
                <div class="typeSize">
                    <span>间距</span>
                    <div class="TS_Btn" @click="distanceHeightFun">小</div>
                    <div class="TS_Btn" @click="distanceHeightFun">中</div>
                    <div class="TS_Btn" @click="distanceHeightFun">大</div>
                </div>
            </div>
            <div class="getCommandOf">
                <!-- <div class="GCO_Box"> -->
                <router-link tag="div" class="GCO_Box" :to="'/catalogueList?id='+getBookID">
                    <span class="iconfont icon-shujia1"></span>
                    <p>目录</p>
                </router-link>
                <!-- </div> -->
                <div class="GCO_Box" @click="nightShowBtn">
                    <span class="iconfont icon-yueliang moon" v-show="!nightShow"></span>
                    <span class="iconfont icon-tianqitaiyangqichuang sun" v-show="nightShow"></span>
                    <p v-show="!nightShow">夜间</p>
                    <p v-show="nightShow">白天</p>
                </div>
                <div class="GCO_Box" @click="typeShowBtn">
                    <span class="iconfont icon-shezhi"></span>
                    <p>设置</p>
                </div>
            </div>
        </div>
        <div class="controlRegion" @click="showPopup"></div>
        <div class="TextContent" v-for="item in listID.slice(0,1)" :key="item.id">
            <div class="textContainer" v-html="contentlist">{{contentlist}}</div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {getBookCatalog,getReaderBookContent} from '../api/catalogueList';
export default {
    data(){
        return{
            getBookID:null,
            navPointListID:[],
            listID:[],
            contentlist:null,
            activeKey: 0,
            showPop:false,
            morebtn:false,
            typeShow:false,
            nightShow:false,
            nightShowType:false,
            bigboxbgcolor:'rgb(255, 196, 70)',
            bgtype:1,
            TypeSize:52,
            fontSize:18,
            lineHeight:28,
            sectionIndex:2,
            distanceHeight:28,
        }
    },
    methods:{
        // 字间距按钮
        distanceHeightFun(e){
            console.log(e.target.textContent)
            if(e.target.textContent == '小'){
                this.distanceHeight = 28;
            }else if(e.target.textContent == '中'){
                this.distanceHeight = 34;
            }else if(e.target.textContent == '大'){
                this.distanceHeight = 40;
            }
            let TextContentData=document.getElementsByClassName("TextContent")[0];
            this.lineHeight = this.distanceHeight;
            TextContentData.style.lineHeight = this.lineHeight +'px';
        },
        // 下载全本
        xiazaiBtn(){
            Toast("已下载")
        },
        // 上一章
        prevBtn(){
            if(this.sectionIndex <= 0){
                Toast("已经是第一章了")
            }else{
                this.sectionIndex -= 1;
                this.getReaderBookContentFun(this.listID[this.sectionIndex-2].id);
            }
        },
        // 下一章
        nextBtn(){
            this.sectionIndex += 1;
            // console.log(this.sectionIndex-2);
            this.getReaderBookContentFun(this.listID[this.sectionIndex-2].id);
        },
        // 更改字体大小按钮
        TypeSizeBtn(e){
            if(e.target.textContent == "A-" && this.TypeSize >=46){
                this.TypeSize -= 2;
                this.fontSize -= 2;
                this.lineHeight -= 1;
            }else if(e.target.textContent == "A+" && this.TypeSize <=60){
                this.TypeSize += 2;
                this.fontSize += 2;
                this.lineHeight += 1;
            }
        },
        // 夜间白天切换
        nightShowBtn(){
            this.nightShow = !this.nightShow;
            if(this.nightShow == false){
                window.document.body.style.backgroundColor = this.bigboxbgcolor;
                window.document.body.style.color = "black";
                this.nightShowType = false;
            }else{
                window.document.body.style.backgroundColor = '#333';
                window.document.body.style.color = "white";
                this.nightShowType = true;
            }
        },
        // 切换类型显示隐藏
        typeShowBtn(){
            this.typeShow = !this.typeShow;
        },
        // 显示顶部和底部设置文章样式
        showPopup(){
            this.showPop = !this.showPop;
        },
        // 章节内容
        // content(id){
        //     this.getReaderBookContentFun(id);
        //     console.log(id)
        // },
        // 获取章节内容接口
        getReaderBookContentFun(id){
            getReaderBookContent({source_uuid:this.getBookID,content_uuid:id}).then(data=>{
                if(data.code==0){
                    this.contentlist = data.data.content
                }
            })
        },
        // 获取章节列表
        getBookCatalogFun(id){
            getBookCatalog({tocId:id}).then(data=>{
                this.navPointListID = data.ncx.navMap.navPoint.navPoint;
                for(let i = 0 ; i < this.navPointListID.length;i++){
                    this.listID.push({index:this.navPointListID[i].index,id:this.navPointListID[i].id,navLabel:this.navPointListID[i].navLabel.split(',')[1]});
                }
                console.log(this.listID)
                this.getReaderBookContentFun(this.listID[this.sectionIndex-2].id);
            })
        }
    },
    created(){
        // this.sectionIndex
        this.getBookID = this.$route.query.id
        this.getBookCatalogFun(this.getBookID);
        window.document.body.style.backgroundColor = this.bigboxbgcolor;
        if(this.$route.query.index){
            this.sectionIndex = this.$route.query.index;
            console.log(this.sectionIndex)
        }
    },
    destroyed(){
        window.document.body.style.backgroundColor = "#fefefe";
        window.document.body.style.color = "#000"
    },
    watch:{
        // 设置小说背景颜色
        bgtype(){
            if(this.bgtype == 1){
                this.bigboxbgcolor = "rgb(255, 196, 70)";
            }else if(this.bgtype == 2){
                this.bigboxbgcolor = "rgb(181, 211, 132)";
            }else if(this.bgtype == 3){
                this.bigboxbgcolor = "rgb(255, 245, 224)";
            }
            if(this.nightShowType == false){
                window.document.body.style.backgroundColor = this.bigboxbgcolor;
            }
        },
        // 改变字体大小
        TypeSize(){
            if(this.TypeSize > 60 || this.TypeSize < 46 ){
                return;
            }
            let TextContentData=document.getElementsByClassName("TextContent")[0];
            TextContentData.style.fontSize = this.fontSize +'px';
            TextContentData.style.lineHeight = this.lineHeight +'px';
            // console.log(TextContentData.style)
        },
    }
}
</script>

<style lang="less">
van-sidebar{
    height: 100%;
}
.textContainer{
    width: 92%;
    margin: 0px auto;
    padding: 20px 0px;
}
.controlRegion{
    position: fixed;
    top: 38%;
    left: 0px;
    width: 100%;
    padding: 80px 0px;
}
.TextContent{
    font-size: 18px;
    line-height: 28px;
    .m-content{
        h1{
            font-size: 24px;
        }
        p{
            text-indent: 2em;
            margin: 10px 0px;
        }
    }
}
.showPopupTop{
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    padding: 8px 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #555;
    color: #ccc;
    .back{
        display: flex;
        align-items: center;
        padding-left: 10px;
        span{
            font-size: 24px;
        }
        span.backText{
            font-size: 16px;
        }
    }
    .SPT_right{
        width: 50%;
        display: flex;
        justify-content: space-around;
        position: relative;
        .SPTR_Box{
            span{
                font-size: 24px;
                font-weight: bold;
            }
            p{
                font-size: 14px;
            }
        }
        .moreoption{
            position: absolute;
            right: 0px;
            top: 52px;
            padding: 10px 15px;
            font-size: 14px;
            box-shadow: 0px 0px 3px #eee;
            background-color: #fff;
            color: #333;
            border-radius: 8px;
        }
    }
}
.showPopupBottom{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #555;
    color: #ccc;
    .sectionBox{
        display: flex;
        justify-content: space-around;
        padding: 20px 0px;
    }
    .installPage{
        padding: 10px 0px;
        .typeSize{
            display: flex;
            align-items: center;
            padding: 10px 0px;
            padding-left: 15px;
            span{
                font-size: 14px;
                margin-right: 30px;
            }
            .TS_Btn{
                font-size: 18px;
                border: 1px solid #999;
                padding: 4px 20px;
                border-radius: 20px;
                margin-right: 30px;
            }
            .bg_Color{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                padding: 2px;
                box-sizing: border-box;
                margin-right: 40px;
            }
            .bg_Color.maizeYellow{
                background-color: rgb(255, 196, 70);
            }
            .bg_Color.aeneous{
                background-color: rgb(181, 211, 132);
            }
            .bg_Color.bluishWhite{
                background-color: rgb(255, 245, 224);
            }
            .bg_Color.con{
                border: 2px solid orange;
            }
        }
    }
    .getCommandOf{
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding-bottom: 10px;
        .GCO_Box{
            span{
                font-size: 28px;
            }
            p{
                font-size: 14px;
            }
            .moon{
                font-size: 24px;
            }
            .sun{
                font-size: 26px;
            }
        }
    }
}
</style>